<template>
    <div id="centreLeft1">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color: #5cd9e8;">
                    <icon name="chart-bar" />
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">发电及时率</span>
                    <dv-decoration-3
                        style="
                            width: 3.25rem;
                            height: 0.75rem;
                            position: relative;
                            top: -0.0375rem;
"
                    />
                </div>
            </div>
            <div class="d-flex jc-center">
                <div id="container" style="width: 100%; height: 13.5rem;" />
            </div>
            <!-- 4个主要的数据 -->
            <div class="bottom-data">
                <div
                    v-for="(item, index) in numberData"
                    :key="index"
                    class="item-box"
                >
                    <div class="d-flex">
                        <dv-digital-flop
                            :config="item.number"
                            style="margin-left: 0.6rem; width: 3.5rem; height: 1.55rem;"
                        />
                    </div>
                    <p class="text" style="text-align: center; font-size: 1rem;">
                        {{ item.text }}
                        <span class="colorYellow">(%)</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: {
                color: [
                    "#37a2da",
                    "#32c5e9",
                    "#9fe6b8",
                    "#ffdb5c",
                    "#ff9f7f",
                    "#fb7293",
                    "#e7bcf3",
                    "#8378ea"
                ],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                legend: {
                    orient: "horizontal",
                    icon: "circle",
                    bottom: 0,
                    x: "center",
                    data: ["江州", "扶绥", "宁明", "大新", "龙州", "凭祥", "天等"],
                    textStyle: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        name: "及时率统计",
                        type: "pie",
                        radius: [10, 60],
                        roseType: "area",
                        center: ["50%", "40%"],
                        data: [
                            { value: 10, name: "江州" },
                            { value: 5, name: "扶绥" },
                            { value: 15, name: "宁明" },
                            { value: 25, name: "大新" },
                            { value: 20, name: "龙州" },
                            { value: 4, name: "凭祥" },
                            { value: 12, name: "天等" }
                        ]
                    }
                ]
            },
            config: {
                lineWidth: 30,
                activeRadius: "80%",
                radius: "75%",
                activeTimeGap: 2000
            },
            numberData: [
                {
                    number: {
                        number: [95],
                        toFixed: 1,
                        content: "{nt}"
                    },
                    text: "今日及时率"
                },
                {
                    number: {
                        number: [85],
                        toFixed: 1,
                        content: "{nt}"
                    },
                    text: "本周及时率"
                }
            ]
        };
    },
    mounted() {
        this.initEchart();
    },
    methods: {
        initEchart() {
            var chartDom = document.getElementById("container");
            var myChart = this.$echarts.init(chartDom);

            myChart.setOption(this.options);
        }
    }
};
</script>

<style lang="scss">
#centreLeft1 {
    padding: 0.2rem;
    height: 22.4rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        height: 22.125rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    }
    .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 21.125rem;
        .active-ring-name {
            padding-top: 0.125rem;
        }
    }
    .bottom-data {
        margin-top: 0.5rem;
        .item-box {
            margin-top: 0.6rem;
            float: right;
            position: relative;
            width: 50%;
            color: #d3d6dd;
            // 金币
            .coin {
                position: absolute;
                left: 0.6rem;
                top: -0.2125rem;
                font-size: 1.25rem;
                color: #ffc107;
            }
            .colorYellow {
                color: yellowgreen;
            }
        }
    }
}
</style>